<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'upload.jsp' starting page</title>
    <script type="text/javascript" src="js/plugin/upload/plupload.full.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/plugin/upload/jquery.ui.plupload/css/jquery.ui.plupload.css">
    <script type="text/javascript" src="js/plugin/upload/jquery.ui.plupload/jquery.ui.plupload.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	//实例化一个plupload上传对象
        var uploader = new plupload.Uploader({
            browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
            url : 'upload.do', //服务器端的上传页面地址
            flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
            silverlight_xap_url : 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
           	filters: {
           		  mime_types : [ //只允许上传图片和zip文件
           		    { title : "Image files", extensions : "jpg,gif,png" }, 
           		    { title : "Zip files", extensions : "zip" },
           		 { title : "PDF", extensions : "pdf" }
           		  ],
           		  max_file_size : '400mb', //最大只能上传400kb的文件
           		  prevent_duplicates : true //不允许选取重复文件
           	}
        });    

        //在实例对象上调用init()方法进行初始化
        uploader.init();

        //绑定各种事件，并在事件监听函数中做你想做的事
        uploader.bind('FilesAdded',function(uploader,files){
        	var file = files[0];
        	$("#files").append($("<li>"+file.name+"</li>"));
        	$('#progressbar').css("width",'0%');
            //每个事件监听函数都会传入一些很有用的参数，
            //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        });
        uploader.bind('UploadProgress',function(uploader,file){
        	debugger;
            //每个事件监听函数都会传入一些很有用的参数，
            //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
            $('#progressbar').css("width",uploader.total.percent+'%');
            $('#progressbar').html(uploader.total.percent+'%');
        });
        
        uploader.bind('UploadComplete',function(uploader,files){ 
        	//debugger;
        	
        });
        
		uploader.bind('Error',function(uploader,errObject){ 
			debugger;
        });
		
		uploader.bind('FileFiltered',function(uploader,file){ 
        });
        //......
        //......

        //最后给"开始上传"按钮注册事件
        $('#start_upload').on('click',function(){
            uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
        });
    });

    </script>

  </head>
  
  <body>
   	<h1>jQuery UI Widget</h1>

	<p>You can see this example with different themes on the <a href="http://plupload.com/example_jquery_ui.php">www.plupload.com</a> website.</p>

	<form id="form" method="post" action="upload.do">
		<div id="uploader" style="width:100px;height:100px;display: none;">
			<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
		</div>
		<br />
		<input type="submit" value="Submit" />
	</form>
        <button id="browse">选择文件</button>
        <button id="start_upload">开始上传</button>
        <ul id="files"></ul>
        <div style="width:200px;height:200px;">
        	<div class="progress">
			   <div class="progress-bar progress-bar-info" id="progressbar" role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  style="width: 0%;"></div>
			</div>
        </div>
  		
  
  
  
  
  
  </body>
</html>
